<template>
  <div class="main">
    <el-form class="demo-form-inline">
        <el-form-item>
            <el-row>
                <el-button type="primary" @click="returnList">返回列表</el-button>
            </el-row>
      </el-form-item>
      <el-form-item>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>任务详情</span>
          </div>
          <div class="text item">
             <div class="content">
              <span>任务名称:</span><span class="data-content">{{ task.taskName }}</span>
            </div>
             <div class="content">
              <span>所属项目:</span><span class="data-content">{{ task.projectName }}</span>
            </div>  
            <div class="content">
              <span>任务类别:<el-tag>{{ taskTypes[task.taskType] }}</el-tag></span>
            </div>
            <div class="content">
              <span>任务状态:<el-tag>{{ taskStatus[task.taskStatus] }}</el-tag></span>
            </div>            
            <div class="content">
              <span>任务详情:</span><span class="data-content">{{ task.taskDetail }}</span>
            </div>
             <div class="content">
              <span>工时进度:</span><span class="data-content">{{ task.useHour?task.useHour:0 }}/{{ task.manHour }}</span>
            </div>   
             <div class="content">
              <span>负责人:</span><span class="data-content">{{ task.leaderName }}</span>
            </div>              
            <div class="content">
              <span>开始时间:</span><span class="data-content">{{ task.startDate }}</span>
            </div>
            <div class="content">
              <span>结束时间:</span><span class="data-content">{{ task.endDate }}</span>
            </div>
            <div class="content">
              <span>创建时间:</span><span class="data-content">{{ task.createTime }}</span>
            </div>
          </div>
        </el-card>
      </el-form-item>
      <el-form-item>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>任务附件</span>
            </div>
            <div class="text item">
                <template>
                <el-table :data="task.files" style="width: 100%">
                    <el-table-column prop="fileName" label="文件名称">
                    </el-table-column>
                    <el-table-column prop="fileSize" label="文件大小（字节）">
                    </el-table-column>
                    <el-table-column label="操作" width="260" align="center">
                    <template slot-scope="scope">
                        <el-link :href="`${baseUrl}${scope.row.filePath}`" :underline="false" target="_blank">
                        <span class="el-icon-document"> 下载文件 </span>
                        </el-link>
                    </template>
                    </el-table-column>
                </el-table>
                </template>
            </div>
        </el-card>
      </el-form-item>
      <el-form-item>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>任务分配</span>
            </div>
            <div class="text item">
                <template>
                <el-table :data="task.works" style="width: 100%">
                    <el-table-column prop="workName" label="工作内容">
                    </el-table-column>
                    <el-table-column prop="executorName" label="执行人">
                    </el-table-column>
                    <el-table-column prop="workStatus" label="当前状态" :formatter="workStatusFmt">
                    </el-table-column>
                    <el-table-column prop="updateTime" label="执行时间">
                    </el-table-column>
                    <el-table-column prop="workNotes" label="执行描述">
                    </el-table-column>
                    <el-table-column label="附件">
                        <template slot-scope="scope">
                        <span class="el-icon-document" v-for="file in scope.files" :key="file.fileId">
                        <el-link :href="`${baseUrl}${file.filePath}`" :underline="false" target="_blank">
                         {{file.fileName}}
                        </el-link>
                        </span>
                        </template>
                    </el-table-column>
                </el-table>
                </template>
            </div>
        </el-card>
      </el-form-item>
      <el-form-item>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>任务过程</span>
            </div>
            <div class="text item">
                <div class="text item">
                    <template>
                    <el-table :data="task.processes" style="width: 100%">
                        <el-table-column prop="processorName" label="处理人">
                        </el-table-column>
                        <el-table-column prop="processType" label="处理动作" :formatter="processTypeFmt">
                        </el-table-column>
                        <el-table-column prop="createTime" label="处理时间">
                        </el-table-column>
                        <el-table-column prop="processNotes" label="处理意见">
                        </el-table-column>
                    </el-table>
                    </template>
                </div>
            </div>
        </el-card>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  getTask,
  taskStatusMap,
  taskTypesMap,
  processTypesMap,
} from "@/api/system/task";
import {workStatusMap} from '@/api/system/work';
export default {
  components: {
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      taskId: 0,
      task: {},
      taskStatus:[],
      taskTypes:[],
      workStatus:[],
      processTypes:[]
    };
  },
  created() {
      console.log(this.$route.query.taskId);
    if (this.$route.query.taskId) {
      this.taskId = this.$route.query.taskId;
      this.init();
    } else {
      this.$message.warning("请先选择项目任务");
      this.$router.go(-1);
    }
  },
  methods: {
    init() {
      taskStatusMap().then(res=>{
        this.taskStatus = res.data;
      });
      taskTypesMap().then(res=>{
        this.taskTypes = res.data;
      });
      workStatusMap().then(res=>{
        this.workStatus = res.data;
      });
      processTypesMap().then(res=>{
        this.processTypes = res.data;
      });

      if (this.taskId == 0 || undefined) {
        this.$message.warning("请先选择项目任务");
        this.$router.go(-1);
      } else {
        getTask(this.taskId).then(res => {
          // console.log(res);
          this.task = res.data;
        });
      }
    },
    workStatusFmt(row){
        return this.workStatus[row.workStatus];
    },
    processTypeFmt(row){
        return this.processTypes[row.processType];
    },
    handleChange(val) {
      // console.log(val);
    },
    returnList(){
        this.$router.go(-1);
    }
  }
};
</script>

<style scoped lang="scss">
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.content{
  line-height: 50px;
}
.content .data-content{
    margin-left: 20px;
}
.el-tag--medium{
    margin-left: 20px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.userImg {
  display: flex;
  justify-content: center;
  align-items: center;
  .demo-image {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    overflow: hidden;
    .block {
      display: flex;
      justify-content: center;
      align-items: center;
      ::v-deep .el-image {
        width: 100px;
        height: 100px;
      }
    }
  }
}
</style>
